<script setup>
  import { ref } from 'vue'
  import ActiveNumber from '@/components/active-number/active-number.vue'
  import { getDeviceInfo, login } from '@/api/tiantai'
  const navList = ref([{ name: '监控', id: 4 }])
  const monitor = ref(null)
  const formatNumber = num => {
    // toFixed() 方法会将数字转换为字符串
    // 如果需要返回数字类型,可以这样修改:
    let parsed = parseFloat(num)
    let result = parsed % 1 === 0 ? parsed.toFixed(0) : parsed.toFixed(1)
    return Number(result) // 将字符串转回数字
  }
  const data = ref([])
  function getData() {
    getDeviceInfo({
      deviceAddrs: '40333755'
    }).then(res => {
      let resp = res.data[0]?.data
      resp.forEach(item => {
        item.humValueStr = formatNumber(item.humValueStr)
        item.temValueStr = formatNumber(item.temValueStr)
      })
      data.value = resp
    })
  }
  function handelClick() {
    monitor.value.open()
  }
  setInterval(() => {
    getData()
  }, 1000*60*60*3) // 3小时刷新一次
  getData()
</script>

<template>
  <Item-Box
    title="智慧茶园气象监测"
    class="left-center"
    :navList="navList"
    @click="handelClick"
  >
    <div class="data-box">
      <div class="item-box">
        <img src="/src/assets/img/small/1.png" />
        <p>环境温度</p>
        <p>
          <active-number :value="data[4]?.temValueStr"></active-number>
          {{ data[4]?.temUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/2.png" />
        <p>湿度</p>
        <p>
          <active-number :value="data[4]?.humValueStr"></active-number>
          {{ data[4]?.humUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/3.png" />
        <p>光照</p>
        <p>
          <active-number :value="data[7]?.temValueStr"></active-number>
          {{ data[7]?.temUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/4.png" />
        <p>风速</p>
        <p>
          <active-number :value="data[6]?.humValueStr"></active-number>
          {{ data[6]?.humUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/5.png" />
        <p>风向</p>
        <p>
          <active-number :value="data[1]?.humValueStr"></active-number>
          {{ data[1]?.humUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/6.png" />
        <p>降雨量</p>
        <p>
          <active-number :value="data[9]?.humValueStr"></active-number>
          {{ data[9]?.humUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/7.png" />
        <p>大气压</p>
        <p>
          <active-number :value="data[6]?.humValueStr"></active-number>
          {{ data[6]?.humUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/8.png" />
        <p>土壤导电率</p>
        <p>
          <active-number :value="data[3]?.humValueStr"></active-number>
          {{ data[3]?.humUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/9.png" />
        <p>土壤湿度</p>
        <p>
          <active-number :value="data[2]?.humValueStr"></active-number>
          {{ data[2]?.humUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/10.png" />
        <p>土壤温度</p>
        <p>
          <active-number :value="data[2]?.temValueStr"></active-number>
          {{ data[2]?.temUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/11.png" />
        <p>二氧化碳</p>
        <p>
          <active-number :value="data[11]?.humValueStr"></active-number>
          {{ data[11]?.humUnit }}
        </p>
      </div>
      <div class="item-box">
        <img src="/src/assets/img/small/12.png" />
        <p>PM2.5/PM10</p>
        <p>
          <active-number :value="data[5]?.humValueStr"></active-number>
          {{ data[5]?.humUnit }}
        </p>
      </div>
    </div>
  </Item-Box>
  <Monitor ref="monitor" />
</template>

<style lang="scss" scoped>
  .left-center {
    height: 342px;
  }

  .data-box {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    height: 300px;

    .item-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      img {
        width: 46px;
        height: 42px;
      }

      p {
        height: 16px;
        font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
        font-weight: normal;
        font-size: 12px;
        color: #ffffff;
        line-height: 16px;

        &:nth-child(3) {
          height: 22px;
          font-family: DIN 30640 Pro, DIN 30640 Pro;
          font-size: 14px;
          color: #0bbdf5;
          line-height: 22px;
        }
      }
    }
  }

  .title {
    margin-top: 19px;
    margin-left: 36px;
    height: 38px;
    font-family: PangMenZhengDao, PangMenZhengDao;
    font-weight: 400;
    font-size: 32px;
    color: #ffffff;
    line-height: 38px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
</style>
